<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 服务管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/servicetype' }">服务类别</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="ServeType">
            <!-- <h4>服务管理</h4> -->

            <!-- 头部 -->
            <header>
                <el-form :hide-required-asterisk="true" :inline="true" :rules="rules" ref="form" label-position="left"
                    :model="form" label-width="75px">
                    <el-form-item label="分类名称:" prop="typename">
                        <el-input v-model="form.typename" placeholder="分类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="分类排序:" prop="sort">
                        <el-input v-model.number="form.sort" placeholder="分类排序"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBtn">保存</el-button>
                    </el-form-item>

                </el-form>
            </header>
            <!-- 表格 -->
            <el-table max-height="301" :data="tableData" border
                :header-cell-style="{ background: '#fff !important', fontWeight: 'normal', textAlign: 'center' }"
                :row-style="{ height: '65px' }" style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" prop="typename" label="服务分类">
                </el-table-column>
                <el-table-column align="center" prop="sort" label="排序">
                </el-table-column>
                <el-table-column align="center" label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><span
                            style="margin: 0 5px;">|</span>
                        <el-button style="color: red;" type="text"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
import { selectservicetype, addservicetype, delservicetype } from '@/api/serveManager'
export default {
    components: { selectservicetype, addservicetype, delservicetype },
    mounted() {
        this.getType()
    },

    methods: {
        // 初始化表格数据和查询
        async getType() {
            let result = await selectservicetype()
            // console.log(result);

            if (result.code == 200) {
                this.tableData = result.data
            } else if (result.code == 400) {
                this.tableData = []
            }
        },
        // 保存服务分类
        async addType() {
            let result = await addservicetype(this.$qs.stringify({
                typename: this.form.typename,
                sort: this.form.sort
            }))

            if (result.code == 200) {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                this.getType()
                this.$refs.form.resetFields();
            } else {
                this.$message.error('添加失败');
            }
        },
        //保存按钮
        addBtn() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.addType()
                } else {

                    return false;
                }
            });

        },
        // 删除服务分类
        async delType(ids) {
            let result = await delservicetype({ id: ids })

            if (result.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.getType()
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delType(row.id)

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    data() {

        return {
            form: {
                typename: '',
                sort: ''
            },
            tableData: [],
            rules: {
                typename: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                sort: [
                    { required: true, message: '请输入分类排序', trigger: 'blur' },
                    { type: 'number', message: '请输入数字形式', trigger: 'blur' }
                ]
            }

        };
    },
};
</script>

<style  scoped>
.ServeType {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

h4 {
    font-weight: 540;
}

header {
    padding: 20px;
    margin-top: 15px;
    box-sizing: border-box;
}
</style>

